<template>
  <view class="list">
    <view class="title">{{ title }}</view>
    <view class="list-info">
      <Hr-Pull-Load
        ref="hrPullLoad"
        :height="-1"
        :bottom-tips="bottomTips"
        @loadMore="$emit('loadMore')"
        @refresh="$emit('refresh')"
      >
        <view>
          <view v-for="(item, index) in list" :key="index" class="list-box" @click="gotoRouter(item)">
            <view class="list-box-left">
              <Progress :stroke-color="'#1492ff'" :value="item[params.progress] | speedToNumber" :stroke-width="6 " :radius="26">
                <div class="content">{{ item[params.progress] | speedToNumber }}</div>
              </Progress>
            </view>
            <view class="list-box-center">
              <view class="list-box-center-title">
                {{ item[params.title] }}
              </view>
              <view class="list-box-center-speed">
                支付进度{{ item[params.progress] }}
              </view>
            </view>
            <view class="list-box-img">
              <u-image width="100%" height="14px" src="../../../static/img/task/open.png" />
            </view>
          </view>
        </view>
      </Hr-Pull-Load>
    </view>
  </view>
</template>

<script>
import Progress from 'easy-circular-progress/src/index';
export default {
  name: 'List',
  components: {
    Progress
  },
  filters: {
    speedToNumber(string) {
      // this.listParams.isPer ?
      return string.toString().replace('%', '');
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: () => ([])
    },
    params: {
      type: Object,
      default: () => ({})
    },
    bottomTips: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
    };
  },
  methods: {
    gotoRouter(item) {
      console.log(item);
      const { CENTERPRISECODE1, CPROGRAMNAME, YSS, ZCS, ZXL } = item;
      const { title, ENTERPRISENAME } = this.$route.query;
      const param = {
        path: '/projectList',
        query: {
          title: title,
          YSS,
          ZCS,
          ZXL: ZXL.replace('%', ''),
          CENTERPRISECODE1,
          CPROGRAMNAME,
          ENTERPRISENAME
        }
      };
      if (title === '资金监管') {
        param.query.menuId = 1624549153686;
      } else if (title === '项目分析') {
        param.query.menuId = 1623565437264;
      }
      this.$router.push(param);
    }
  }
};
</script>

<style lang="less" scoped>
.list{
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  padding-top: 27px;
  .title{
    font-size: 17px;
    height: 27px;
    color: #303133;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    padding-left: 12px;
  }
  .list-info{
    width: 100%;
    height: calc(100% - 27px);
    overflow: auto;
    .list-box{
      height: 73px;
      display: flex;
      border-bottom: 1px solid #e7e8e9;
      padding-left: 10px;
      padding-right: 10px;
      .list-box-left{
        width: 73px;
        height: 73px;
        padding-top: 3px;
      }
      .list-box-center{
        flex: 1;
        padding-top: 15px;
        .list-box-center-title{
          color: #303133;
          font-size: 16px;
          font-weight: 400;
          font-family: PingFangSC, PingFangSC-Regular;
        }
        .list-box-center-speed{
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #b6b9bf;
          padding-top: 2px;
        }
      }
      .list-box-img{
        width: 8px;
        height: 73px;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
